<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>我的卡券</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../icon/iconfont.css" />
    <style>
        body {
            background: #F0F0F0;
        }

        .aui-tab-item.aui-active {
            color: #D2984D;
            border-bottom: 2px solid #D2984D;
        }

        .aui-list-item-text {
            padding: .2rem 0
        }

        .item-list .item:first-child {
            margin-top: 0.25rem;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 4rem;
            position: absolute;
            top: 0;
            right: 0;
            border: 0;
            margin-top: 0;
            z-index: 2;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-transform: rotate(0);
            transform: rotate(0);
            background: #E4C493;
            color: #FFF;
        }
        .notuse{
          background:#CCC;
        }
        .kong{
          position: absolute;
          top: 10rem;
          left: 50%;
          transform: translateX(-50%);
          font-size: 1rem;
          color: #ccc;
          display: none;
        }
        header{
          padding: 1.6rem 0.8rem 0.5rem 0.8rem;
          position: fixed;
          width: 100%;
          background-color: #fff;
          z-index: 98;
          border-bottom: 1px solid #ccc
        }
        header span:nth-of-type(1){
          font-size: 1rem
        }
        header span:nth-of-type(2){
          font-size: 1rem
        }
        .clip{
          overflow: hidden;/*超出部分隐藏*/
          text-overflow:ellipsis;/* 超出部分显示省略号 */
          white-space: nowrap;/*规定段落中的文本不进行换行 */
          width: 8.5rem;/*需要配合宽度来使用*/
        }
    </style>
</head>

<body>
    <header>
      <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
      <span>我的卡券</span>
    </header>
    <div class="max-box" style="position:relative">
        <div class="aui-tab" style="position:fixed;top:3.6rem;width:100%;z-index:99;border-top: 1px solid #EEE;">
            <div class="aui-tab-item tapmode aui-active">未使用</div>
            <div class="aui-tab-item tapmode">已使用</div>
        </div>
        <div class="item-list" id="couponListBox" style="padding-top:5.8rem"></div>
        <p class="kong">暂无更多数据!</p>
    </div>
</body>
<script type="text/javascript" src="../../../lib/zepto.js"></script>
<script type="text/javascript" src="../../../lib/artTemplate/template.js"></script>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/dns.js"></script>
<script type="text/html" id="couponList">
  {{each items as value index}}
  {{if value.status.msg !== '已失效'}}
  <div class="item" style="padding:.2rem .5rem;background-color:rgb(240, 240, 240)">
      <div class="aui-card-list" style="margin-bottom: 0rem;">
          <div class="aui-card-list-content">
              <ul class="aui-list aui-media-list">
                  <li class="aui-list-item aui-list-item-middle" style="padding-left:0.6rem;">
                      <div class="aui-media-list-item-inner">
                          <div class="aui-list-item-media" style="width: 4rem;border-radius:50%;height:4rem;overflow:hidden;margin-right:0.6rem">
                              <img src="{{value.coupon.merchant.img.url}}" class="aui-img-round" style="width:100%;height:100%;border-radius:0;">
                          </div>
                          <div class="aui-list-item-inner aui-list-item-arrow">
                              <div class="aui-list-item-text" style="padding:0;margin:0">
                                  <div class="aui-list-item-title aui-font-size-14">{{value.coupon.merchant.title}}</div>
                              </div>
                              <div class="aui-list-item-text" style="padding:0;margin:0">
                                  <div class="aui-list-item-title aui-font-size-20 clip">{{value.coupon.title}}</div>
                              </div>
                              <div class="aui-list-item-text" style="width:7.3rem;padding:0;line-height:0.8rem">
                                  {{if value.coupon.limit_time_type == 1}}
                                    <div class="aui-list-item-title aui-font-size-14">有效期：{{value.coupon.day.str}}</div>
                                  {{/if}}
                                  {{if value.coupon.limit_time_type == 2}}
                                    <div class="aui-list-item-title aui-font-size-14">有效期：{{value.coupon.start_time}}至{{value.coupon.end_time}}</div>
                                  {{/if}}
                              </div>
                              <div class="box {{value.status.msg == '已使用' ? 'notuse' : ''}}">{{value.status.msg}}</div>
                          </div>
                      </div>
                  </li>
              </ul>
          </div>
      </div>
  </div>
  {{/if}}
  {{/each}}
</script>
<script type="text/javascript">
    apiready = function() {
      getcoupon(0)
    };
    function getcoupon(type) {
      var token = localStorage.getItem("token");
      $.ajax({
        type:"post",
        data:{
          type:type
        },
        beforeSend:function (request) {
          request.setRequestHeader("token",token)
        },
        url:dns+"coupon/user",
        success:function(res){
          // console.log(JSON.stringify(res));
          if(res.count == 0){
            $(".kong").css("display","block")
          };
          if(res.count !== 0){
            $(".kong").css("display","none")
          };
          var html = template("couponList",{"items":res.data});
          document.getElementById("couponListBox").innerHTML = html;

          //tab切换
          $('.aui-tab-item').each(function() {
              $(this).click(function() {
                  $('.aui-tab-item').removeClass('aui-active');
                  $(this).addClass('aui-active');
                  var text = $(this).text();
                  if(text == "未使用"){
                    getcoupon(0)
                  };
                  if(text == "已使用"){
                    getcoupon(1);

                  };
              })
          })
        },
        error:function(err){
          console.log(JSON.parse(err.responseText).msg);
        }
      })
    }
</script>

</html>
